<template>
  <div class="home">
    <Layout>
      <Header class="header">
        <section class="header-content">
          <img src="@/assets/logo_od.png" class="header-logo">
          <div class="header-menu">
            <Menu mode="horizontal" theme="dark" :active-name="activeUrl" class="header-menu">
              <MenuItem name="/index" to="/index">首页</MenuItem>
              <MenuItem name="/project-case" to="/project-case">项目案例</MenuItem>
              <MenuItem name="/service-team" to="/service-team">服务团队</MenuItem>
              <MenuItem name="/company-dynamics" to="/company-dynamics">公司动态</MenuItem>
              <MenuItem name="/about" to="/about">关于欧点</MenuItem>
              <MenuItem name="/contact" to="/contact">联系我们</MenuItem>
            </Menu>
          </div>
        </section>
      </Header>
      <Content class="main">
        <!-- <transition name="fade" mode="out-in"> -->
          <router-view />
        <!-- </transition> -->
      </Content>

      <section class="connect" v-if="!hide">
        <Row class="connect-content">
          <Col span="8" class="connect-content-item">
            <div class="connect-content-item-line"></div>
            <div class="connect-content-item-title">快捷链接</div>
            <div class="connect-content-item-links">
              <router-link to="index" @click="jumpTo('/project-case')">项目案例</router-link>
              <router-link to="index" @click="jumpTo('/service-team')">服务团队</router-link>
              <router-link to="index" @click="jumpTo('/company-dynamics')">公司动态</router-link>
              <router-link to="index" @click="jumpTo('/about')">关于欧点</router-link>
              <router-link to="index" @click="jumpTo('/contact')">联系我们</router-link>
            </div>
          </Col>
          <Col span="12" class="connect-content-item">
            <div class="connect-content-item-line"></div>
            <div class="connect-content-item-title">联系我们</div>
            <div class="connect-content-item-links">
              <span>地址：上海市静安区彭江路602号E座415室 400-100-2187 </span>
              <span>电话：400-100-2187 </span>
              <span>手机：15021535960 / 135641382773</span>
              <span>邮箱：stella@oudot.cn</span>
            </div>
          </Col>
          <Col span="4" class="connect-content-item">
            <div class="connect-content-item-line"></div>
            <div class="connect-content-item-title">关注我们</div>
            <div class="connect-content-item-links">
              <img src="@/assets/home_pic_ewm.png">
            </div>
          </Col>
        </Row>
      </section>

      <Footer v-if="!hide" class="footer">Copyright@2016 Oragee Corp.All Rights Reserved.沪ICP备 08006976-5号 上海欧建通信科技有限公司</Footer>
    </Layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeUrl: '',
      hide: false
    }
  },
  updated() {
    // activeUrl
    this.activeUrl = this.$route.path
    if(this.activeUrl === '/contact') {
      this.hide = true
    } else {
      this.hide = false
    }
  },
  mounted() {
    // activeUrl
    this.activeUrl = this.$route.path
  },
  methods: {
    jumpTo(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  background-color: #212734;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-content { 
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  height: 41px;
}
/*菜单样式*/
.el-menu {
  background-color: #212734;
}
.el-menu--horizontal>.el-menu-item.is-active {
  color: #0088DE;
  border: 0;
}
.el-menu--horizontal>.el-menu-item {
  color: #FFFFFF;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent;
  color: #0088DE;
}
.el-menu.el-menu--horizontal {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/*菜单样式 over*/
.main {
  padding: 0;
  overflow: hidden;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:64px;
  background:rgba(33,39,52,1);
  font-size:14px;
  color:rgba(255,255,255,0.5);
  line-height:64px;
}
.connect {
  width: 100%;
  height: 440px;
  background: rgba(33,39,52,1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: center;
}
.connect-content {
  width: 1200px;
  height: 100%;
}
.connect-content-item {
  padding: 60px 0;
}
.connect-content-item-line {
  width:160px;
  height:1px;
  background:rgba(255,255,255,1);
  opacity:0.4;
}
.connect-content-item-title {
  font-size: 20px;
  color: rgba(255,255,255,1);
  line-height: 28px;
  margin-top: 28px;
}
.connect-content-item-links {
  display: flex;
  flex-direction: column;
}
.connect-content-item-links a,
.connect-content-item-links span {
  margin-top: 33px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 20px;
  text-decoration: none;
}
.connect-content-item-links img {
  width: 200px;
  margin-top: 33px;
}
</style>
